<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<p v-if="show">{{ msg }} -- v-if</p>
			<p v-else="show">{{ msg }} -- v-else</p>
			<p v-show="show">{{ msg }} -- v-show</p>
		<!--
			1、v-if/v-show用来展示和隐藏元素，v-if会删除dom元素，v-show不会删除dom元素，而是将样式设置为display:none
			2、v-if和v-else只能显示一个
			3、v-if和v-else之间不能有任何元素
		-->
		
		</div>
		<script>
			var vue = new Vue({
				el:'#test',
				data:{
					msg:'哈哈',
					btn:'点我点我快点我！',
					show:false,
					num:1
				},
				methods:{
					clicktest(){
						this.btn = '没想到吧？！' + String(this.num);
						this.num++;
					}
				}
			})
		</script>
	</body>
</html>
